<template>
	<view>
		<view class="search-header" ref="hader">
			<view class="search">
				<text class="iconfont icon-fangdajing1 bw-search"></text>
				<input type="text" placeholder="请输入关键词" v-model="searchInput" />
				<button @click="cancel">搜索</button>
			</view>
		</view>
		<view class="conent">
			<view class="scroll-Y_body-left">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
					:style="{'height': windowHeight + 'px'}">
					<block v-for="(a_item,a_index) in scrollLists" :key="a_index">
						<view :class="{'active':index == a_index}" @click="getIndex(a_item,a_index)">
							<text>{{a_item.name}}</text>
					<!-- <text :class="`iconfont ${a_item.icon}`" v-if="a_item.icon"
								:style="{'color': a_item.color,'font-size': 32 + 'rpx','padding-left': 5 + 'rpx'}"></text> -->
						</view>
					</block>
				</scroll-view>
			</view>

			<view class="scroll-Y_body-right">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower"
					:style="{'height': windowHeight + 'px'}" v-if="lists.length > 0">
					<text class="bw-title">{{lists[index].category_name}}</text>
					<block v-for="(b_item,b_index) in lists">
						<view class="scroll_Y_body-list">
							<image :src="b_item.image"></image>
							<view class="scroll_Y-right">
								<text class="bw_list-title">{{b_item.title}}</text>
								<text class="bw_list-describe">{{b_item.description}}</text>
								<view class="bw_list_flex">
									<view style="display: flex;align-items: center;">
										<view class="bw_list-price">￥<text>{{b_item.price}}</text></view>
										<text class="bw_list-text">￥{{b_item.vip_price}}</text>
									</view>
									<view class="bw_add_num" @click="change('add',b_item)">+</view>
									<view class="bw-num" v-if="b_item.num > 0">{{b_item.num}}</view>
									<view class="bw_add_num" @click="change('subtract',b_item)" v-if="b_item.num > 0">-
									</view>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
				<Empty :marked="'该分类下数据为空哦'" :fontSize="25" v-if="Switch == true"></Empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		categoryList,
		for_category,
		addShop
	} from '../../../api/Hometwo.js';
	import Empty from 'components/bw-Empty/bw-Empty.vue';
	export default {
		components: {
			Empty
		},
		data() { //新 #3cb1a7 秒icon-miaov 热icon-re
			return {
				scrollTop: 0, //距离顶部的距离
				windowWidth: 0, //屏幕宽度
				windowHeight: 0, //屏幕高度
				scrollLists: [], //左侧分类列表
				lists: [], //分类下的商品列表
				index: 0,
				searchInput: '',
				req: { //左侧分类
					pid: 0,
					limit: 100,
					page: 1
				},
				shop: { //分类下面的商品
					identify: '',
					limit: 10,
					page: 1
				},
				addshopping: { //添加购物车
					store_id: '', //商家Id
					type: '', //类型
					goods_id: '', //商品ID
					goods_value_ids: '', //商品属性ID
					cart_num: '' //商品数量
				},
				Switch: false, //是否显示为空提示
				total: 0, //分类下面的商品条数	
			}
		},
		async mounted() {
			try {
				const res = uni.getSystemInfoSync();
				this.windowWidth = res.windowWidth;
				this.windowHeight = res.windowHeight - this.$refs.hader.$el.offsetHeight;
				//获取左侧筛选框
				const relut = await categoryList(this.req);
				this.scrollLists = relut.data.data;
				this.shop.identify = this.scrollLists[0].identify;
				this.for_category();
			} catch (e) {
				// error
			}
		},
		methods: {
			//区域下拉加载
			lower(e) {
				if (this.lists.length < this.total) {
					this.shop.page += 1;
					this.shop.identify = this.scrollLists[this.index].identify;
					this.for_category();
				}
			},
			getIndex(a_item, a_index) {
				this.index = a_index;
				this.shop.identify = a_item.identify;
				this.for_category();
			},
			//获取分类下面的商品
			async for_category() {
				try {
					const res = await for_category(this.shop);
					this.total = res.data.total;
					if (res.data.data.length > 0) {
						for (var i = 0; i < res.data.data.length; i++) {
							res.data.data[i]["num"] = 0;
							this.lists.push(res.data.data[i]);
						}
						this.Switch = false;
					} else {
						this.lists = [];
						this.Switch = true;
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			//加或减
			change(e, item) {
				if (e == 'add') {
					item.num++;
					this.addShop(item.num, item.id);
				} else {
					if (item.num > 0) {
						item.num--;
						this.addShop(item.num, item.id);
					}
				}
				console.log(e, item);
			},
			//添加购物车
			async addShop(cart_num, id) {
				this.addshopping.cart_num = cart_num;
				this.addshopping.goods_id = id;
				const res = await addShop(this.addshopping);
				console.log(res);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../iconfont.scss";

	//不出现滚动条
	/deep/.uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none
	}

	.search-header {
		width: 100%;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		background-color: #FFFFFF;

		.search {
			width: 92%;
			height: 60rpx;
			padding-top: 12rpx;
			padding-bottom: 12rpx;
			border-radius: 50rpx;
			border: 1px solid #ec5990;
			margin: 0px auto;
			display: flex;
			align-items: center;

			.bw-search {
				font-size: 40rpx;
				padding: 20rpx;
			}

			button {
				width: 20%;
				background-color: #ec5990;
				border-radius: 50rpx;
				color: #FFFFFF;
				font-size: 30rpx;
			}

			input {
				width: 64%;
				height: auto;
				font-size: 29rpx;
				padding-left: 20rpx;
			}
		}
	}

	.conent {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.scroll-Y_body-left {
		width: 27%;

		.scroll-Y {
			background-color: #f7f8f9;

			view {
				width: 100%;
				text-align: center;
				line-height: 110rpx;
				height: 110rpx;

				text {
					font-size: 28rpx;
				}
			}
		}
	}

	.scroll-Y_body-right {
		width: 70%;

		.bw-title {
			width: 90%;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			// background-color: red;
			font-weight: 500;
			display: block;
			font-size: 30rpx;
		}

		.scroll_Y_body-list {
			width: 100%;
			height: 160rpx;
			margin: 0rpx auto;
			margin-bottom: 50rpx;
			display: flex;

			// justify-content: space-between;
			.scroll_Y-right {
				margin-left: 20rpx;
			}

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}

			.bw_list-title {
				font-size: 28rpx;
				font-weight: 500;
				display: block;
				padding-top: 10rpx;
			}

			.bw_list-describe {
				width: 90%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 20rpx;
				padding-top: 10rpx;
				color: #9A9EA9;
				display: block;
			}

			.bw_list_flex {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20rpx;

				.bw_list-text {
					text-decoration: line-through;
					font-size: 20rpx;
					color: #9A9EA9;
					margin-left: 10rpx;
					padding-top: 7rpx;
				}

				.bw_list-price {
					color: #FD1470;
					font-weight: 600;
					font-size: 20rpx;

					text {
						font-size: 32rpx;
					}
				}

				.bw_add_num {
					width: 38rpx;
					height: 38rpx;
					line-height: 35rpx;
					border-radius: 50%;
					background-color: #FF4790;
					color: #FFFFFF;
					text-align: center;
					margin-left: 15rpx;
					font-size: 35rpx;
				}

				.bw-num {
					margin-left: 15rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.active {
		background-color: #FFFFFF;
		font-weight: 500;
	}
</style>
